<template>
  <div>

    <h5>测试方法是否会改变参数</h5>
    <el-button @click="paramChange">方法接收数据，并在方法中改变数据</el-button>


    <h1 class="icon icon-num"></h1>
    <el-row class="mgtop10">
      <label style="margin-left: 10px">报告日期：</label>
      <el-date-picker v-model="form.startDate" style="width: 150px" @change="comDateChange(form.startDate)"
                      :clearable="false" placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"/>
      <span>到</span>
      <el-date-picker v-model="form.endDate" style="width: 150px" @change="comDateChange(form.endDate)"
                      :clearable="false" placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"/>
    </el-row>
    <el-row class="mgtop10">
      <span class="search-label">报告期</span>
      <el-date-picker
          v-model="searchForm.reportDate"
          end-placeholder="结束日期"
          range-separator="到"
          start-placeholder="开始日期"
          type="daterange"
          value-format="yyyy-MM-dd"
      />
    </el-row>
    <el-row class="mgtop10">
      <p>1.对象a:{a:1,b:2,c:4}    对象b:{a:2,b:3,d:5}  合并后:<span> {{joinObjData}}</span></p>
      <el-button type="primary"  @click="joinObj">两个对象合并</el-button>
    </el-row>
    <el-row class="mgtop10">
      <p>2.[{"e":"王五"},{"b":"小红"},{"a":"小明"},{"d":"李四"},{"c":"张三"}]，按照指定顺序排序["小明","小红","张三","李四","王五"],排序的数组中的值不在规定的顺序中，向后放置。</p>
      <el-button type="success" @click="squence">排序</el-button>
    </el-row>
    <el-row>
      <p>3.时间格式转化，'yyyy-MM-dd hh:mm:ss'</p>
      <el-button type="success" @click="dateChangeFormat">时间</el-button>
    </el-row>
    <el-row>
      <p>4.slice用法</p>
      <el-button type="success" @click="slice">结果</el-button>
    </el-row>
    <el-row class="mgtop10">
      <el-button type="info" @click="rebuildData">数据重组</el-button>
    </el-row>
    <el-row class="mgtop10">
      <el-button type="info" @click="sum(1,2,2,'',4)">求和</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <el-row style="margin-top: 10px">
    数字A：<el-input-number v-model="a"></el-input-number>
    数字B：<el-input-number v-model="b"></el-input-number>
    求 和： {{total}}
    </el-row>

    <el-row>
      字符串格式的日期转成日期格式的日期：
      <el-button type="primary" @click="changeDateFormat">转换</el-button>
    </el-row>

    <el-row>
      <h1>
        测试new Array[7]
      </h1>
      <el-button @click="testArray">测试</el-button>
    </el-row>

    <el-row>
      <el-button type="primary" plain @click="checkObjPro">如果obj中没有某个属性返回什么</el-button>
    </el-row>

    <el-row>
      <el-button type="primary" @click="split">测试split分割</el-button>
    </el-row>

    <div>
      <el-button type="primary" @click="showThis()">测试this指向</el-button>
    </div>
  </div>
</template>

<script>
import Date from "@/utils/date";
import {testMixin} from "@/components/jstest/mixins";
export default {
  name: "js-test",
  mixins: [testMixin],
  data(){
    return{
      joinObjData:{},
      tableForm:{
        geographicalTypeTableData:[]
      },
      a:undefined,
      b:undefined,
      form:{
        startDate:'2023-03-09',
        endDate:'2023-03-15'
      },
      searchForm: {
        reportDate: [],
      },
      url:"/**************"  ,
      paramArr:[]

    }
  },
  watch:{
    'searchForm.reportDate': {
      handler(newVal, oldVal){
        let flag = newVal && newVal.length > 1 && newVal.join('') !== oldVal.join('');
        if (flag){
          this.comDateChange1(newVal)
        }
      },
      deep: true,
    },
  },
  computed:{
    total(...num){
      //console.log("num:",num)
      return this.a + this.b ;
    }
  },
  created(){
    this.test()

    console.log("********",this.$store.state.num)
  },

  methods:{
    comDateChange(val) {
      if (!val) return;
      // 周四-周三
      let one = new Date(val.replace(/-/g, "/"));
      let two = new Date(val.replace(/-/g, "/"));
      let oneDay = one.getDay();
      let twoDay = two.getDay();
      let aa = oneDay > 3 ? oneDay - 4 : oneDay + 3;
      let bb = twoDay < 4 ? 3 - twoDay : 10 - twoDay;
      one.setDate(one.getDate() - aa)
      two.setDate(two.getDate() + bb);
      let month = one.getMonth() + 1;
      let date = one.getDate();
      this.form.startDate = one.getFullYear() + '-' + (month > 10 ? month : '0' + month) + '-' + (date > 10 ? date : '0' + date);
      month = two.getMonth() + 1;
      date = two.getDate();
      this.form.endDate = two.getFullYear() + '-' + (month > 10 ? month : '0' + month) + '-' + (date > 10 ? date : '0' + date);
    },
    comDateChange1(val){
      if (!val || val.length < 2) return;
      // 周四-周三
      this.searchForm.reportDate =this.getArrDate(val)
    },
    getArrDate(val){
      let one = new Date(val[0].replace(/-/g, "/"));
      let oneDay = one.getDay();
      let aa = oneDay > 3 ? oneDay - 4 : oneDay + 3;
      let oneDayTime =24*60*60*1000;
      one.setDate(one.getDate() - aa)
      let two=one.getTime()+6*oneDayTime
      return [this.formatDate(one), this.formatDate(two)];
    },
    formatDate(val){
      let monday =new Date(val);
      let time = new Date(monday);
      let y = time.getFullYear();
      let m = time.getMonth()+1;
      let d = time.getDate();
      m=m<10 ? '0' + m : m
      d=d<10 ? '0' + d : d
      let start = y+'-'+m+'-'+d;
      return start
    },
    joinObj(){
      let objA = {a:1,b:2,c:4} ;
      let objB = {a:2,b:3,d:5} ;
      this.joinObjData = {...objA,...objB}
     },
    squence(){

      let aArr = ["小明","小红","张三","李四","王五"] ;
      let bArr = [{"name":"王五"},{"name":"小红"},{"name":"zhaosi"},{"name":"小明"},{"name":"李四"},{"name":"张三"}] ;
      let squenArr = [] ;
      aArr.forEach((it,index) => {
        bArr.forEach((itt,index) => {
            if (it == itt.name){
                squenArr.push(itt)
            }
        })
      })

      let cArr = this.del(bArr,squenArr) ;
      let dArr = [...squenArr,...cArr] ;

      console.log("dArr",dArr)

    },
    del(aArr,bArr){
      let cArr =  aArr.filter(it=>{
         let temp =   bArr.filter(itt=>{
             return it.name == itt.name ;
          }) ;

         return temp.length == 0 ;
       })

      console.log("cAA:",cArr)
      return cArr ;
    },
    dateChangeFormat(){
       console.log(new Date().format("yyyy-MM-dd hh:mm:ss"))
    },
    slice(){
//       arrayObj - 原始数组;
//       start - 必填；设定新数组的起始位置；如果是负数，则表示从数组尾部开始算起（-1
//       指最后一个元素，-2 指倒数第二个元素，以此类推）。
// end - 可选；设定新数组的结束位置；如果不填写该参数，默认到数组结尾；如果是负数，则表示从数组尾部开始算起（-1 指最后一个元素，-2
//       指倒数第二个元素，以此类推）。
// 例1：获取仅包含最后一个元素的子数组
      let arr0 = [1,2,3,4,5];
      console.log(arr0.slice(-2))

      let arr1=[1,2,3,4,5];
      arr1.slice(-1);//[5]

      //例2：获取不包含最后一个元素的子数组
      let arr2=[1,2,3,4,5];
      arr2.slice(0, -1);//[1,2,3,4]

      //例3：获取包含 从第二个元素开始的所有元素的子数组
      let arr3=[1,2,3,4,5];
      arr3.slice(1);//[2,3,4,5]

      let arr4=[{name:'a'},{name:'b'},{name:'c'}] ;
      let arr5 = arr4.slice(1)
        console.log("arr5:",arr5)
        console.log("arr6:",arr4.slice(1,2))
    },
    rebuildData(){

      this.tableForm.systemTypeTableData = [];
      let re = {
        "code": 0,
        "msg": null,
        "data": [{
          "id": "1559080457004978178",
          "dictId": "1559080268697505794",
          "label": "集团内部",
          "dictType": "system_type",
          "description": "集团内部",
          "sortOrder": 1,
          "createTime": "2022-08-15 15:32:02",
          "updateTime": null,
          "remarks": "集团内部",
          "delFlag": "0",
          "value": "1"
        }, {
          "id": "1559080514731184130",
          "dictId": "1559080268697505794",
          "label": "集团外部",
          "dictType": "system_type",
          "description": "集团外部",
          "sortOrder": 2,
          "createTime": "2022-08-15 15:32:16",
          "updateTime": null,
          "remarks": "集团外部",
          "delFlag": "0",
          "value": "2"
        }]
      }
      re.data.forEach((item) => {
        this.tableForm.systemTypeTableData.push({
          type1: "系统",
          type2: item.label,
          type:'2' ,
          typeValue:item.dictId,
          inExecution: "",
          cyearNewlyOpened: "",
          cyearCurrentComletion: "",
          cyearInExecution: "",
          // currentComletion: "",
          // newlyOpened: "",
        });
      });

      console.log("systemTypeTableData",this.tableForm.systemTypeTableData)


      let res = {
        info:{
          id :'1' ,//填报id
          startDate:'2023-02-09' , // 开始日期
          endDate:'2023-02-15' , // 结束日期
          status :'0' //审批状态 0待提交 1已提交 表格可以编辑。状态为1时，表格只能查看
        },
        currentList:[{
          pid : '1' ,
          type1: "专业",
          type2: '油气田工程',
          type :'1' , //分类 1专业 2系统 3地域 4级别
          typeValue :'1' , //分类的值
          inExecution: '1' ,// 在执行
          newlyOpened:'1' ,// 本期新开
          cyearNewlyOpened : '1' ,//当年累计新开
          currentComletion : '1' ,//本期完工
          cyearCurrentComletion: '1' ,// 当年累计完工
          cyearInExecution : '1' ,//当年累计执行
        },{
          pid : '2' ,
          type1: "专业",
          type2: '油气储运工程',
          type :'1' , //分类 1专业 2系统 3地域 4级别
          typeValue :'2' , //分类的值
          inExecution: '2' ,// 在执行
          newlyOpened:'2' ,// 本期新开
          cyearNewlyOpened : '2' ,//当年累计新开
          currentComletion : '2' ,//本期完工
          cyearCurrentComletion: '2' ,// 当年累计完工
          cyearInExecution : '2' ,//当年累计执行
        },{
          pid : '' ,
          type1: "系统",
          type2: '集团内部',
          type :'2' , //分类 1专业 2系统 3地域 4级别
          typeValue :'1559080268697505794' , //分类的值
          inExecution: '3' ,// 在执行
          newlyOpened:'3' ,// 本期新开
          cyearNewlyOpened : '3' ,//当年累计新开
          currentComletion : '3' ,//本期完工
          cyearCurrentComletion: '3' ,// 当年累计完工
          cyearInExecution : '3' ,//当年累计执行
        },{
          pid : '' ,
          type1: "系统",
          type2: '集团外部',
          type :'2' , //分类 1专业 2系统 3地域 4级别
          typeValue :'1559080268697505794' , //分类的值
          inExecution: '4' ,// 在执行
          newlyOpened:'14' ,// 本期新开
          cyearNewlyOpened : '4' ,//当年累计新开
          currentComletion : '4' ,//本期完工
          cyearCurrentComletion: '4' ,// 当年累计完工
          cyearInExecution : '4' ,//当年累计执行
        }],
        beforeList  :[
          {
            pid : '1' ,
            type1: "专业",
            type2: '油气田工程',
            type :'1' , //分类 1专业 2系统 3地域 4级别
            typeValue :'1' , //分类的值
            inExecution: '1' ,// 在执行
            newlyOpened:'1' ,// 本期新开
            cyearNewlyOpened : '1' ,//当年累计新开
            currentComletion : '1' ,//本期完工
            cyearCurrentComletion: '1' ,// 当年累计完工
            cyearInExecution : '1' ,//当年累计执行
          },{
            pid : '2' ,
            type1: "专业",
            type2: '油气储运工程',
            type :'1' , //分类 1专业 2系统 3地域 4级别
            typeValue :'2' , //分类的值
            inExecution: '2' ,// 在执行
            newlyOpened:'2' ,// 本期新开
            cyearNewlyOpened : '2' ,//当年累计新开
            currentComletion : '2' ,//本期完工
            cyearCurrentComletion: '2' ,// 当年累计完工
            cyearInExecution : '2' ,//当年累计执行
          },{
            pid : '' ,
            type1: "系统",
            type2: '集团内部',
            type :'2' , //分类 1专业 2系统 3地域 4级别
            typeValue :'1559080268697505794' , //分类的值
            inExecution: '3' ,// 在执行
            newlyOpened:'3' ,// 本期新开
            cyearNewlyOpened : '3' ,//当年累计新开
            currentComletion : '3' ,//本期完工
            cyearCurrentComletion: '3' ,// 当年累计完工
            cyearInExecution : '3' ,//当年累计执行
          },{
            pid : '' ,
            type1: "系统",
            type2: '集团外部',
            type :'2' , //分类 1专业 2系统 3地域 4级别
            typeValue :'1559080268697505794' , //分类的值
            inExecution: '4' ,// 在执行
            newlyOpened:'14' ,// 本期新开
            cyearNewlyOpened : '4' ,//当年累计新开
            currentComletion : '4' ,//本期完工
            cyearCurrentComletion: '4' ,// 当年累计完工
            cyearInExecution : '4' ,//当年累计执行
          }]  //上期数据，空数组时都为0
      } ;

      let currentList = res.currentList ;
      let beforeList = res.beforeList ;
      this.tableForm.systemTypeTableData.map(
          (item) => {
            currentList.map((iitem)=>{
              let flag = item.type==iitem.type && item.typeValue==iitem.typeValue ;
              if (flag)
                  item.inExecution = iitem.inExecution;
                  item.cyearNewlyOpened = iitem.cyearNewlyOpened;
                  item.cyearCurrentComletion = iitem.cyearCurrentComletion;
                  item.cyearInExecution = iitem.cyearInExecution;
            })

            // item.old = beforeList.filter(
            //     (x) => x.type1 == item.type1 && x.type2 == item.type2
            // )[0];
            // item.newold = beforeList.filter(
            //     (x) => x.type1 == item.type1 && x.type2 == item.type2
            // )[0];
          }
      );
      console.log("this.tableForm:",this.tableForm)


    },
    sum(...num){

      let objA = {'a':1,"b":2,"C":3} ;
      let objB = {'a':6,"b":5,"c":4} ;
      console.log("合并：",{...objA,...objB})



      let sum = 0 ;
      num.map(item=>{
        if (item !== undefined && item !== '' && item !== null){
          sum += item ;
        }
      })
      console.log("sum:",sum)
      return sum ;
    },
    changeDateFormat(){
      let s = '2022-08-04'.replaceAll('-', '/');
        console.log(s);
      let date =   new Date(s);
      console.log("date：",  date instanceof Date )
    },
    testArray(){
      let arr = new Array(5);
      arr[0] =[{id:'1'}] ;
      arr[1] =[{id:'2'},{id:'3'}] ;
      console.log("arr.length",arr.length)
      for (let i=0 ; i++ ;i<arr.length){
        console.log("item0:",arr[i])
      }
      let ids = [] ;
      arr.map((item)=>{
         item.map(_item=>{
           ids.push(_item.id)
         })
      })
      console.log("ids:",ids)
    },
    checkObjPro(){
      let obj = {name:'',age:''}
      console.log("如果obj中不包含某个属性，返回什么:",obj.sex) ;
    },
    split(){
      let str = '2' ;
      let str1 = '2,3'
      console.log(str.split(','))
      console.log(str1.split(","))
    },

    showThis(){
      function Singer (name, song) {
        this.name = name
        this.sing = function () {
          console.log(`${name} 唱 ${song}`)
        }
      }
      // new 就是执行构造函数，返回一个对象，不写new就是普通函数的调用，没有创造对象的能力
      let singer1 = new Singer("刘德华", "冰雨")
      console.log("singer1:",singer1)
      singer1.sing()
    },
    paramChange(){
      this.changeParam(this.paramArr)
      console.log("paramArr:",this.paramArr)
    },
    changeParam(paramArr){
      paramArr.push({
        label:'1',value:'1'
      })
    }
  }
}
</script>

<style scoped>
.mgtop10{margin-top: 10px}
h1:after {content: ' \0030';font-size: 12px}
</style>